{% extends 'base.html' %}
{% load static %}
{% block title %}
    学生管理
{% endblock %}
{% block css %}
{#  <link href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css" rel="stylesheet">#}
{% endblock %}
{% block header_name %}
    学生管理
{% endblock %}
{% block bread %}
      <!-- Breadcrumb-->
    <div class="breadcrumb-holder container-fluid">
    <ul class="breadcrumb">
      <li class="breadcrumb-item"><a href="{% url 'index' %}">首页</a></li>
      <li class="breadcrumb-item active">学生管理</li>
    </ul>
    </div>
{% endblock %}
{% block body %}

    {% with role=request.user.role %}

    <section class="tables">
      <div class="container-fluid">
        <div class="row">
           <!-- Inline Form-->
          {% if role == 1 or role == 2 or role == 3 %}
          <div class="col-lg-12">
            <div class="card">
              <div class="card-body">
                <div class="row">
                  <div class="col-lg-5">
                    <form class="form-inline">
                      <div class="btn-group">
                        <button type="button" id="select-btn" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          学号
                        </button>
                        <div class="dropdown-menu">
                          <a class="dropdown-item" href="#" id="select-uid">学号</a>
                          <a class="dropdown-item" href="#" id="select-name">姓名</a>
                          {% if role != 3 %}
                          <a class="dropdown-item" href="#" id="select-academy">学院</a>
                          <a class="dropdown-item" href="#" id="select-grade">年级</a>
                          {% endif %}
                          <a class="dropdown-item" href="#" id="select-clazz">班级</a>
                        </div>
                      </div>
                      <div class="btn-group">
                        <div class="form-group">
                          <div class="input-group">
                            <input id="inlineFormInput" name="uid" type="text" placeholder="搜索学号" class="mr-3 form-control">
                            <div class="input-group-prepend">
                              <button type="submit" class="btn btn-primary">搜索</button>
                              <button type="button" class="btn btn-blue" id="reset-select">重置</button>
                            </div>
                         </div>
                      </div>

                      </div>
                    </form>
                  </div>
                  <div class="col-lg-4"></div>
                  {% if role == 1 %}
                    <div class="col-lg-3">
                    <div class="pull-right">
                      <button class="btn btn-blue" data-toggle="modal" data-target="#modal-in-class">
                        <i class="fa fa-caret-square-o-right" > 导入</i>
                      </button>
                      <div class="modal modal-default fade" id="modal-in-class">
                        <div class="modal-dialog">
                          <div class="modal-content">
                            <div class="modal-header">
                               <h5 class="modal-title">导入学生数据</h5>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>

                            </div>
                            <div class="modal-body">
                              <form id="student-import-form" class="form-group" enctype="multipart/form-data" method="post" action="{% url 'students:student_import' %}">
                                {% csrf_token %}
                                {{ form.as_p }}

                                <p class="help-block">按照(学号,姓名,学院,年级,班级,总学时,文体学时,法律学时,心理学时,创新创业学时,思想道德学时)排列</p>
                                <input type="submit" class="btn btn-primary" value="导入"/>
                                <button type="button" class="btn btn-default pull-right" data-dismiss="modal">取消</button>

                              </form>
                            </div>
                          </div>
                        </div>
                      </div>
                      <a class="btn btn-blue" href="{% url 'students:student_export' %}">
                        <i class="fa fa-download">下载数据</i>
                      </a>
                    </div>

                  </div>
                  {% endif %}
                </div>

              </div>
            </div>
          </div>
          {% endif %}
          <div class="col-lg-12">
            <div class="card">
              <div class="card-header">
              {% if role == 3 %}
              <h1>{{ request.user.academy }} {{ request.user.grade }}</h1>
              {% endif %}
              {% if role == 1 or role == 2 %}
{#                &nbsp;&nbsp;&nbsp;<input type="checkbox" id="checkAll" name='CheckAll'>#}
                <div class="btn-group">

                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      筛选学院
                    </button>
                    <div class="dropdown-menu">
                    <a class="dropdown-item" href="{% url 'students:students' %}">全部</a>
                      {% for academy in academy_list %}
                        <a class="dropdown-item" href="?academy={{ academy }}" id="auto-select-academy">{{ academy }}</a>
                      {% endfor %}
                    </div>
                  </div>
{#                &nbsp;<a href="#" class="btn btn-danger" id="bulk-delete-btn">删除所选学生</a>#}
                {% if role == 1 %}
                   <a href="{% url 'students:student_create' %}" class="btn btn-outline-success">添加学生</a>
                   <a href="{% url 'students:student_export' %}" class="btn btn-danger pull-right" id="delete-all-btn">删除所有学生</a>
                  {% endif %}
              {% endif %}
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table id="studentTable" data-reorderable-columns="true" class="table table-striped table-hover table-bordered">
                    <thead>
                      <tr>
{#                        {% if role == 1 or role == 2 %}#}
{#                          <th>选择</th>#}
{#                        {% endif %}#}
                        <th>学号</th>
                        <th>姓名</th>
                        <th>学院</th>
                        <th>年级</th>
                        <th>班级</th>
                        <th>总学时</th>
                        <th>文体</th>
                        <th>法律</th>
                        <th>心理</th>
                        <th>创新创业</th>
                        <th>思想道德</th>
                        {% if role == 1%}
                          <th>操作</th>
                        {% endif %}
                      </tr>
                    </thead>
                    <tbody>

                      {% for student in students %}
                          <tr data-uid="{{ student.uid }}">
{#                          {% if role == 1 or role == 2 %}#}
{#                          <td><input type="checkbox" name="student-checkbox" value="{{ student.uid }}"></td>#}
{#                          {% endif %}#}
                          <td style="font-weight: bold">{{ student.uid }}</td>
                          <td>{{ student.name }}</td>
                          <td>{{ student.academy }}</td>
                          <td>{{ student.grade }}</td>
                          <td>{{ student.clazz }}</td>
                          <td style="color: blue">{{ student.credit }}</td>
                          <td style="color: blue">{{ student.wt_credit }}</td>
                          <td style="color: blue">{{ student.fl_credit }}</td>
                          <td style="color: blue">{{ student.xl_credit }}</td>
                          <td style="color: blue">{{ student.cxcy_credit }}</td>
                          <td style="color: blue">{{ student.sxdd_credit }}</td>
                          {% if role == 1%}
                          <td>
{#                              <a href="{% url 'students:student_detail' student.pk %}" class="btn btn-success btn-sm">查看</a>#}
                              <a href="{% url 'students:student_update' student.pk %}" class="btn btn-success btn-sm">编辑</a>
                              <a href="{% url 'students:student_delete' student.pk %}" class="btn btn-danger btn-sm ">删除</a>
                          </td>
                          {% endif %}
                          </tr>
                      {% endfor %}
                    {% endwith %}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    {% include 'pagination.html' %}
{% endblock %}


{% block js %}
  <script src="{% static 'js/jquery-form.js' %}"></script>
  <script src="{% static 'js/student.js' %}"></script>
  <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/extensions/resizable/bootstrap-table-resizable.min.js"></script>
  <script src="{% static 'js/colResizable-1.6.min.js' %}"></script>
  <script>
    $(function () {
        $("#studentTable").colResizable({
        liveDrag: true,//实时显示滑动位置
        gripInnerHtml: "<div class='grip'></div>",
        draggingClass: "dragging",
        postbackSafe: true,//刷新后保留之前的拖拽宽度
        headerOnly:true,
        resizeMode:"overflow",
        //onResize: onSampleResized
    });

    })
  </script>
{% endblock %}

